<template>
  <div class="wrapper-fixed">
    <div class="action-bar-wrapper">
      <el-col :span="24" class="action-bar">
        <el-select v-model="authStatusOption" clearable placeholder="审核状态" style="margin:0 20px;">
          <el-option
            v-for="item in authStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" size="medium" @click="search">检索</el-button>
        <!-- <el-button type="primary" size="medium" @click="toVipCompanyEditor('')">添加</el-button> -->
      </el-col>
    </div>

    <!-- 列表 -->
    <el-table
      :data="tableData"
      v-loading="tableLoadingShow"
      element-loading-text="拼命加载中"
      style="width: 100%">
      <el-table-column
        label="logo"
        width="100">
        <template slot-scope="scope">
          <div>
            <img :src="scope.row.photo_url" alt="" style="width:60px;border-radius:50%;height:60px;object-fit:cover">
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="单位名称"
        show-overflow-tooltip
        width="180">
        <template slot-scope="scope">

          <div @click.stop="showConsultation(scope.row)" style="cursor:pointer;color:#409EFF">{{scope.row.name}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="contact_number"
        label="联系方式"
        show-overflow-tooltip
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="提交时间"
        show-overflow-tooltip
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="status_name"
        label="审核状态"
        show-overflow-tooltip
        width="100"

      >
        <template slot-scope="scope">
          <div>
            <el-tag v-show="scope.row.status==0">未审核</el-tag>
            <el-tag type="success" v-show="scope.row.status==1">成功</el-tag>
            <el-tag type="info" v-show="scope.row.status==2">拒绝</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="审核" width='200'>
        <template slot-scope="scope">

          <el-button type='primary' v-show="scope.row.status==0" size="mini" @click="passApplication(scope.row.id)">通过
          </el-button>
          <el-button type='danger' v-show="scope.row.status==0" size="mini" @click="denyApplication(scope.row.id)">拒绝
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width='80'>
        <template slot-scope="scope">
          <el-button type='danger' size="mini" @click="delUnitSettledApply(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-col :span="24" class="footer-bar">
      <div class="page-code">
        <el-pagination
          background
          :page-size="16"
          layout="prev, pager, next"
          :total="totalPage"
          @current-change="pageChange"
        >
        </el-pagination>
      </div>
    </el-col>
    <!-- 列表end -->


    <!-- 单位详情 -->
    <el-dialog title="申请详情" :visible.sync="consultationVisible" @close="initData">
      <el-form :label-position="'left'" label-width="150px">
        <el-form-item label="logo">
          <div><img :src="consultationDetail.photo_url" alt=""
                    style="width:60px;border-radius:50%;height:60px;object-fit:cover"></div>
        </el-form-item>
        <el-form-item label="单位名称">
          <div>{{consultationDetail.name}}</div>
        </el-form-item>
        <el-form-item label="单位地址">
          <div>
            {{consultationDetail.province}}{{consultationDetail.city}}{{consultationDetail.area}}{{consultationDetail.address}}
          </div>
        </el-form-item>
        <el-form-item label="联系人">
          <div>{{consultationDetail.contact_person}}</div>
        </el-form-item>
        <el-form-item label="联系方式">
          <div>{{consultationDetail.contact_number}}</div>
        </el-form-item>
        <el-form-item label="E-mail">
          <div>{{consultationDetail.email}}</div>
        </el-form-item>
<!--        <el-form-item label="业务范围">-->
<!--          <div class="tag-wrapper">-->
<!--            <span v-for="(item,index) of consultationDetail.unit_business_label" :key="index">{{item}}</span>-->
<!--          </div>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="单位简介">-->
<!--          <div>{{consultationDetail.introduction}}</div>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="法定代表人">-->
<!--          <div>{{consultationDetail.legal_person_name}}</div>-->
<!--        </el-form-item>-->
        <el-form-item label="营业执照">
          <div class="demo-image__preview">
              <el-image
                class="el-image__preview"
                style="width: 200px; height: 200px;"
                :src="consultationDetail.license_img_url"
                :preview-src-list="imgList"
              ></el-image>
          </div>
        </el-form-item>
        <el-form-item label="统一社会信用代码">
          <div>{{consultationDetail.uniform_social_credit_code}}</div>
        </el-form-item>
        <el-form-item label="创建时间">
          <div>{{consultationDetail.created_at}}</div>
        </el-form-item>


      </el-form>
    </el-dialog>
    <!-- 单位详情end -->

    <!-- 营业执照 -->
    <el-dialog title="营业执照" :visible.sync="licenseVisible" @close="initData">
      <el-form :label-position="'left'" label-width="150px">
        <div align="center"><img
          src="https://ciy.oss-cn-shenzhen.aliyuncs.com//web/bibiji/2020/2/12/ededff219ce3963a786cc3047944a444.jpg"
          alt="" style="max-width:400px;margin:0 auto"></div>
      </el-form>
    </el-dialog>
    <!-- 营业执照end -->
  </div>
</template>
<script>
  import router from '../../router/index'
  export default {
    name: 'member',
    data() {
      return {
        consultationVisible: false,//查看单位详情状态
        goodAtVisible: false,
        licenseVisible: false,

        searchText: '',
        userAuthId: '',//选中的用户id

        authStatusOption: '',//头部筛选认证状态
        authStatusOptions: [
          {label: '全部', value: -1},
          {label: '待处理', value: 0},
          {label: '通过', value: 1},
          {label: '拒绝', value: 2}

        ],

        consultationDetail: {},//单位详情
        imgList: [],
        tableData: [{}],
        page: 1,
        totalPage: 0,
        linkType:'',
        linkId: '',
        tableLoadingShow: false
      }
    },
    methods: {

      search() {
        this.tableLoadingShow = true;
        this.page = 1;
        this.getUnitSettledApplyList()
      },
      async getUnitSettledApplyList() {
        //获取会员列表
        let params = {
          page: this.page,
          limit: 16,
          keyword: this.searchText,
          status: this.authStatusOption == -1 ? '' : this.authStatusOption,
          id: this.linkId?this.linkId:''
        }
        let res = await this.$api.getUnitSettledApplyList(
          params);
        if (res.data.level == 'success') {
          this.tableData = res.data.data;
          this.totalPage = res.data.page_info.total;
          this.imgList = [];
          this.tableData.forEach(item => {
            this.imgList.push(item.license_img_url)
          })
        }
        this.tableLoadingShow = false;
      },
      pageChange(e) {
        //翻页
        this.page = e;
        this.getUnitSettledApplyList();
      },
      async delUnitSettledApply(id) {
        //删除
        let judge = null;
        let tit = '删除该入驻申请?';
        try {
          judge = await this.$confirm(tit, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (error) {
          judge = 'cancel'
        }
        if (judge == 'confirm') {
          this.delUnitSettledApplyHandle(id)
        }
        console.log(judge)
      },
      async delUnitSettledApplyHandle(id) {
        let res = await this.$api.delUnitSettledApply({id: id})
        if (res.data.level == 'success') {
          this.$message.success(res.data.message);
          this.getUnitSettledApplyList()
        } else {
          this.$message.error(res.data.message);
        }
      },
      async passApplication(id) {
        //通过审核
        let judge = null;
        let tit = '通过该入驻申请?';
        try {
          judge = await this.$confirm(tit, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (error) {
          judge = 'cancel'
        }
        if (judge == 'confirm') {
          this.changeUnitSettledApplyStatus(id)
        }
        console.log(judge)
      },
      async denyApplication(id) {
        //拒绝审核
        let judge = null;
        let tit = '拒绝该入驻申请?';
        try {
          judge = await this.$confirm(tit, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (error) {
          judge = 'cancel'
        }
        if (judge == 'confirm') {
          this.changeUnitSettledApplyStatus(id, 'refusal')
        }
        console.log(judge)
      },
      async changeUnitSettledApplyStatus(id, type) {
        let res = await this.$api.changeUnitSettledApplyStatus({id: id, type: type})
        if (res.data.level == 'success') {
          this.$message.success(res.data.message);
          this.getUnitSettledApplyList()
        } else {
          this.$message.error(res.data.message);
        }
      },
      showLicense() {
        //显示营业执照
        this.licenseVisible = true;
      },
      showConsultation(scope) {
        //显示单位详情
        this.consultationDetail = scope;
        this.consultationVisible = true;
        console.log(this.imgList)
      },
      initData() {

      },

    },
    mounted() {
      this.getUnitSettledApplyList();
    },

    created() {
      this.linkId = this.$route.query.linkId;
    },

    watch: {
      //监听相同路由下参数变化的时候，从而实现异步刷新
      $route(to, from) {
        console.log('执行')
        this.linkId = this.$route.query.linkId;
        this.getUnitSettledApplyList();
      }
    }
  }
</script>
<style lang="scss" scoped>
  .screen {
    margin-top: -10px !important;
  }

  .action-bar-wrapper {
    position: sticky;
    z-index: 1;
    top: -10px;
  }

  .action-bar {
    background-color: #f2f2f2;

    height: 60px;
    margin: 10px 0px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 20px;

    .action-bar-input {
      width: 250px;
      margin-right: 14px;
    }

    .task-form-text {
      color: #666666;
    }
  }

  .el-table-style {
    width: 100%;
    border: 1px solid #f2f2f2;
  }

  .footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f2f2f2;
    padding: 8px;
    margin: 10px 0px;
    box-sizing: border-box;
  }

  .dialog-footer {
    text-align: center;
  }

  .tag-wrapper {
    span {
      padding: 20px
    }
  }
</style>
